<template>
  <el-table
    :data="PermisstionArr"
    style="width: 100%; margin-bottom: 20px"
    :expand-row-keys="['1']"
    row-key="id"
    border
  >
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="权限值" prop="code"></el-table-column>
    <el-table-column label="修改时间" prop="updateTime"></el-table-column>
    <el-table-column label="操作">
      <!-- row:即为已有的菜单对象|按钮的对象的数据 -->
      <template #default="{ row, $index }">
        <el-button type="primary" @click="addPermisstion(row)" size="small" :disabled="row.level === 4">
          {{ row.level === 3 ? '添加功能' : '添加菜单' }}
        </el-button>
        <el-button
          type="primary"
          @click="updatePermisstion(row)"
          size="small"
          :disabled="row.level == 1 ? true : false"
        >
          编辑
        </el-button>
        <el-popconfirm :title="`你确定要删除${row.name}?`" width="260px" @confirm="removeMenu(row.id)">
          <template #reference>
            <el-button type="primary" size="small" :disabled="row.level == 1 ? true : false">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <MenuModal ref="menuRef" :modalData="modalData" :modalType="modalType" @undated="handlerUndated" />
</template>

<script setup lang="ts">
import MenuModal from './MenuModal/index.vue'
import { ref, onMounted } from 'vue'
import { reqAllPermisstion, reqAddOrUpdateMenu, reqRemoveMenu } from '@/api/acl/menu'
let modalType = ref<string>('')
let modalData = ref<any>({})
let menuRef = ref()
const PermisstionArr = ref([])
//组件挂载完毕
onMounted(() => {
  getHasPermisstion()
})
//获取菜单数据的方法
const getHasPermisstion = async () => {
  let result: any = await reqAllPermisstion()
  if (result.code === 200) {
    PermisstionArr.value = result.data
  }
}
const addPermisstion = (data: any) => {
  modalType.value = 'add'
  modalData.value = data
  menuRef.value.open()
}
const updatePermisstion = (val: any) => {
  modalType.value = 'edit'
  modalData.value = val
  menuRef.value.open()
}
const handlerUndated = () => {
  getHasPermisstion()
}
const removeMenu = async (id: number) => {
  let result: any = await reqRemoveMenu(id)
  if (result.code === 200) {
    getHasPermisstion()
  }
}
</script>

<style scoped></style>
